<template>
  <div>
    <el-card size="small" title="" style="width: 100%;height: 100%" :body-style="{'padding':'0'}">
      <div id="widgetName">
        <span v-if="activeElement.page">页面配置</span>
        <span v-else>
          {{activeElementTitle}}
          <span v-if="editUuid">
            <el-input ref="uuidInput" v-model="uuid" size="mini" style="width: 200px">
              <template slot="append">
                <el-button type="primary" size="mini" icon="el-icon-check" @click="finishEditUuid"></el-button>
                <el-button type="primary" size="mini" icon="el-icon-close" @click="cancelEditUuid"></el-button>
              </template>
            </el-input>

          </span>
          <span v-else>
            [
            {{activeElement.uuid}}
            <el-button type="text" icon="el-icon-edit-outline" @click="startEditUuid"></el-button>
            ]
          </span>

        </span>
      </div>
      <el-tabs id="panelTabs" type="card" stretch v-model="activeTabName" @tab-click="onTabChange">
        <el-tab-pane label="样式" name="style">
          <page-style-pane v-if="activeElement.page" :item="activeElement" class="fix-height thin-scrollbar"/>
          <style-pane v-else :item="activeElement" class="fix-height thin-scrollbar"/>
        </el-tab-pane>
        <el-tab-pane label="交互" name="action">
          <action-pane :item="activeElement" class="fix-height thin-scrollbar"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
  import StylePane from './style';
  import PageStylePane from './pageStyle';
  import ActionPane from './action';
  import vpd from '../../mixins/vpd';
  import widgets from '../../../widgets';

  export default {
    mixins: [vpd],
    components: {
      PageStylePane,
      StylePane,
      ActionPane
    },
    computed: {
      // 选中元素对象
      activeElement() {
        return this.$vpd.state.activeElement
      },
      pageInfo() {
        return this.$vpd.state.pageInfo
      },
      activeElementTitle() {
        return widgets.getTitle(this.activeElement.type);
      },
      widgets() {
        return this.$vpd.state.widgets;
      }
    },
    data() {
      return {
        activeTabName: 'style',
        editUuid: false,
        uuid: null,
      }
    },
    methods: {
      onTabChange() {
      },
      startEditUuid() {
        this.uuid = String(this.activeElement.uuid);
        this.editUuid = true;
        this.$nextTick(() => {
          this.$refs.uuidInput.focus();
          this.$refs.uuidInput.select();
        })
      },
      finishEditUuid() {
        if (!this.uuid || this.uuid.length === 0) {
          this.$message.error('uuid不能为空');
          return false;
        }
        const isRepeat = this.widgets.some(w => {
          return w.uuid === this.uuid;
        });
        if (isRepeat) {
          this.$message.error('uuid不能重复');
          return false;
        }

        this.$vpd.commit('updateUuid', {
          uuid: this.activeElement.uuid,
          newUuid: this.uuid
        });
        this.editUuid = false;
      },
      cancelEditUuid() {
        this.editUuid = false;
      }
    }
  }
</script>
<style lang="scss">
  #panelTabs {
    .el-tabs__content {
      padding: 0 5px;
    }
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item {
    height: 30px;
    line-height: 30px;
  }
</style>
<style scoped>
  #widgetName {
    font-size: 14px;
    padding: 10px;
  }

  .fix-height {
    height: calc(100vh - 135px);
    overflow: auto;
  }
</style>

